<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>cors跨域</h1>
  <button id="btn">发送请求</button>
  <script>
    /* 
      ajax请求分为简单请求和复杂请求:
        简单请求:
          - get和post默认都属于简单请求
          - 并且http的头部信息中不能超出以下字段
            - Accept
            - Accept-language
            - Content-Type:值只能是 'application/x-www-form-urlencoded'
        复杂请求:
          - 不属于简单请求的,都称作为复杂请求
          - put和delete都属于复杂请求
          - 只要添加额外请求头的也是属于复杂请求

        复杂请求再跨域的情况下,会先发送一个空的body的OPTIONS预检请求(查看服务器的权限信息)
    
    
    
    */
    // const oBtn = document.getElementById('btn');
    // const myAxios = axios.create({
    //   baseURL: "http://127.0.0.1:3000",
    //   timeout: 10000,
    //   headers: {
    //     token: "asjdlakjdalsdjasld"
    //   }
    // })
    // oBtn.onclick = async function () {
    //   const re = await myAxios.get("http://127.0.0.1:3000/userInfo", {
    //     params: {
    //       userId: "001"
    //     }
    //   })

    //   console.log(re);
    // }



    // const obtn = document.querySelector('#btn')
    // // 创建axios实例
    // const myAxios = axios.create({
    //   // baseURL是公共url
    //   baseURL: "http://127.0.0.1:3000",
    //   // 处理超时
    //   timeout: "1000",
    //   // 添加请求头
    //   herders: {
    //     token: "asjdlakjdalsdjasld"
    //   }
    // })
    // // 搭建ajax请求
    // btn.onclick = async function () {
    //   try {
    //     const re = await myAxios.get("/userInfo", {
    //       params: {
    //         userID: "001"
    //       }
    //     })
    //     console.log(re);
    //   } catch (e) {
    //     console.log(e.message);
    //   }

    // }

    // 获取元素
    const obtn = document.querySelector("#btn")
    // 创建Axios分身
    const myAxios = axios.create({
      baseURL: "http://127.0.0.1:3000",
      timeout: '10000',
      Headers: {
        token: "asjdlakjdalsdjaslda"
      },

    })
    obtn.onclick = async function () {
      try {
        const re = await myAxios.get("/userInfo", {
          // 这是查询字符串
          params: {
            userId: "001"
          }
        })
        // await等待的promise实例的值
        console.log('re', re);
      } catch (e) {
        console.log(e.message);
      }
    }
  </script>
</body>

</html>